<template>
    <div>
        <van-cell-group>
            <van-field v-model="address" label="地区"  readonly @click.native="areaShow = true" placeholder="请选择地区" input-align="right" />
        </van-cell-group>

       <van-button type="primary" style="display: block; margin: 30px auto; width: 90%;" @click="submit">确认修改</van-button>
        <van-popup v-model='areaShow' position="bottom">
            <van-area :area-list="areaList" @cancel="areaShow=false"  :value="districtId"  @confirm="selectArea"/>
        </van-popup>
    </div>
</template>

<script>
import area from './../../../lib/area';
import axios from 'axios';
export default {
    name: 'editInfo',
    data() {
        return {

            areaShow: false,
            areaList: area,

            provinceId: '', //省份id
            provinceName: '',
            cityId: '', //城市id
            cityName: '',
            districtId: '', //地区id
            districtName: '',
            address: '',
        }
    },

    methods: {
        selectArea(data) {
            this.areaShow = false;
            this.provinceId = data[0].code;
            this.provinceName = data[0].name;
            this.cityId = data[1].code;
            this.cityName = data[1].name;
            this.districtId = data[2].code;
            this.districtName = data[2].name;

            this.address = this.provinceName + this.cityName + this.districtName;
        },

        submit() {
            let params = {
                provinceId: this.provinceId, //省份id
                provinceName: this.provinceName,
                cityId: this.cityId, //城市id
                cityName: this.cityName,
                districtId: this.districtId, //地区id
                districtName: this.districtName,
            };

            let isEmpty = Object.keys(params).some(e => e === '');
            if (isEmpty) {
                this.$toast('请选择完整的地区信息');
                return;
            }
            this.$http.post('/user/user/front/modifyUser', params).then(res => {
                if (res.status === 0) {
                    this.$store.dispatch('getUserInfo', this.$store.state.userInfo.token).then(() => {
                        this.$toast.success('修改成功');
                        setTimeout(() => {
                            this.$router.back();
                        }, 700)
                    })
                } else {
                    this.$toast.fail(res.messasge);
                }
            })
        }
    },

    created() {
        if (this.$route.query.address) {
            this.address = this.$route.query.address;
            this.provinceId = this.$route.query.provinceId;//省份id
            this.cityId = this.$route.query.cityId;//省份id
            this.districtId = this.$route.query.districtId;//省份id
        }
    }
}
</script>

<style lang="scss">
.avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }
}
</style>
